<template>
  <div style="height: 100%;">
    <SeachTable v-show="!isIssue" :tableType="1" ref="searchTable" :forms="tableForms" :btnLefts="btnLefts"
      :btnRights="btnRights" :tableLoading="tableLoading" :tableConfig="tableConfig" :tableData="tableData"
      :totalPage="total" @handlerSearch="handlerSearch">
    </SeachTable>
    <div v-show="isIssue" class="issueTable">
      <div class="issueHeader">
        <img src="@/assets/images/left-jt.png" alt="" class="img" @click="backHandle">
        <span>发放管理</span>
      </div>
      <SeachTable class="issueTable" :tableType="1" ref="issueSearchTable" :forms="issueTableForms" :btnLefts="issueBtnLefts"
        :btnRights="issueBtnRights" :tableLoading="issueTableLoading" :tableConfig="issueTableConfig" :tableData="issueTableData"
        :totalPage="issueTotal" @handlerSearch="issueHandlerSearch">
      </SeachTable>
    </div>
  </div>
</template>

<script setup>
import { useCurd,useIssue } from './Hooks/index';

const {
  searchTable,
  tableLoading,
  total,
  tableData,
  btnLefts,
  btnRights,
  tableConfig,
  tableForms,
  handlerSearch,
  isIssue
} = useCurd();
const {
  issueSearchTable,
  issueTableLoading,
  issueTotal,
  issueTableData,
  issueBtnLefts,
  issueBtnRights,
  issueTableConfig,
  issueTableForms,
  issueHandlerSearch,
}= useIssue();

const backHandle = () => {
  isIssue.value = false
}
</script>

<style lang="less" scoped>
div{
  box-sizing: border-box;
}
.productImg {
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid #DDD;
  border-radius: 4px;
  margin-right: 8px;
}

.productName {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.issueTable{
  height: calc(100% - 50px);
}
.issueHeader {
  padding-left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  font-size: 16px;
  color: #000;
  font-weight: 600;
  border-bottom: 1px solid #DDD;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(0deg, #FFF 0%, #FFF 100%), #FFF;

  .img {
    cursor: pointer;
    width: 16px;
    height: 16px;
    position: relative;
    ;
    // top: 1px;
  }
}
.issueTable{
  :deep(.search-table){
    .line-block{
      display: none;
    }
    .btn-area{
      padding-top: 0;
    }
    .search-line{
      padding-top: 16px;
      padding-bottom: 2px;
    }
  }
}
</style>